import React,{useState,useEffect} from 'react'
import {View, StyleSheet, Button, Text, Image, ScrollView, TextInput} from 'react-native';
import {ThemeColor} from '../utils/common';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation} from '@react-navigation/native';
import screen from '../utils/screen';
import Images from '../images/Images';
import TouchableView from '../components/touchableView';
import LGBtn from '../components/touchableView/lgBtn';
import DocumentPicker from 'react-native-document-picker';
import  RNFS from 'react-native-fs';
import {openAssignFolder} from '../utils/nativeUtil';

const AddAssets = ()=>{

    const [showSuccess,setShowSuccess] = useState(false)
    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()


    useEffect(()=>{
        var path = RNFS.DownloadDirectoryPath + '/test.txt';

        // write the file
        RNFS.exists(path).then(isExist=>{
            if(isExist){
                RNFS.readDir(RNFS.DownloadDirectoryPath).then(dirItems=>{
                    console.log(dirItems);
                    dirItems.forEach(item=>{
                        if(item.isFile()){
                            console.log('file:',item);

                        }
                    })
                })
            }else{
                RNFS.writeFile(path, 'Lorem ipsum dolor sit amet', 'utf8')
                    .then((success) => {
                        console.log('FILE WRITTEN!');
                    }).catch((err) => {
                    console.log(err.message);
                });
            }
        })


    },[])

    const openPicker = ()=>{
        const downloadFile = RNFS.DownloadDirectoryPath;
        console.log(downloadFile);
        // openAssignFolder(downloadFile)
        // return
        DocumentPicker.pickSingle({
            copyTo:'documentDirectory'
        }).then((res)=>{
            console.log('picker res:',res);
        }).catch(error=>{
            console.log('picker err:',error);
        })
    }

    return (
        <View style={[styles.container,{paddingTop:headerHeight}]}>
            <ScrollView
                contentContainerStyle={{paddingTop:30,paddingHorizontal:10}}
            >
                <Text style={{color:'#333',fontSize:15}}>请选择本地加密文件</Text>
                <TouchableView
                    style={styles.addBtn}
                    onPress={openPicker}
                >
                    <Image source={Images.add_icon} style={{width:14,height:14,tintColor:'#333'}} resizeMode={'contain'}/>
                </TouchableView>

                <View style={styles.line}/>

                <Text style={{color:'#333',fontSize:15,marginTop:3}}>请输入文件密码</Text>

                <TextInput
                    style={styles.input}
                    cursorColor={'#333'}
                    placeholder={'请输入'}
                    placeholderTextColor={'#666'}/>

                <LGBtn
                    title={'下一步'}
                    style={styles.nextBtn}
                    onPress={()=>{
                        navigation.navigate('DecodeSuccess',{title:'导入个人数字资产'})
                    }}
                />


            </ScrollView>

        </View>
    )
}

export default AddAssets

const styles = StyleSheet.create({
    container:{
        flex:1, backgroundColor:ThemeColor.theme
    },
    addBtn:{
        width:80,height:80,borderWidth: 1,borderColor: '#ACACAC',justifyContent: 'center',alignItems: 'center',
        marginTop:10,borderRadius: 5
    },
    input:{
        color:'#333',flex:1,height:80,backgroundColor:'#eee',marginTop: 10,borderRadius:4,
        textAlignVertical:'top',padding:10
    },
    line:{
        height:0.3,backgroundColor: '#eee',width:'100%',marginVertical: 10
    },
    nextBtn:{
        alignSelf:'center',marginTop:30
    }
})
